<template>
  <div>
    <qc-page-table
      ref="cronTaskPageTableRef"
      :columns="columns"
      :loadData="loadData"
      :rowKey="(record) => record[primaryKey]"
    >
      <template #toolbarTitle>
        {{ t("org.cron-task.tableTitle") }}
      </template>
      <template #toolbarButton>
        <qc-add-button @click="addButtonClick"></qc-add-button>
        <qc-delete-button @click="deleteButtonClick"></qc-delete-button>
      </template>
      <template #customCronTaskName="{ text, record }">
        <span class="qc-link" @click="editButtonClick(record)">
          {{ text }}
        </span>
      </template>
      <template #customActive="{ text }">
        <a-badge
          :status="text ? 'success' : 'default'"
          :text="
            text ? t('org.cron-task.activated') : t('org.cron-task.stopped')
          "
        >
        </a-badge>
      </template>
      <template #customOperation="{ record }">
        <a-button
          size="small"
          :type="record.active ? 'danger' : 'primary'"
          :loading="record.changeActionBtnLoading"
          @click="changeActive(record)"
        >
          {{
            record.active
              ? t("org.cron-task.stop")
              : t("org.cron-task.activation")
          }}
        </a-button>
        <a-button
          size="small"
          style="margin-left: 10px"
          type="primary"
          :loading="record.runOnceJobBtnLoading"
          @click="runOnceJob(record)"
        >
          {{ t("org.cron-task.executeOnce") }}
        </a-button>
      </template>
    </qc-page-table>
    <a-modal
      v-if="showModal"
      v-model:visible="showModal"
      @ok="handleOk"
      class="cronTaskFormModal"
    >
      <template #title> {{ modalTitle }} </template>
      <cron-task-from
        ref="cronTaskFormRef"
        :cronTaskId="currentCronTaskId"
        @submit-success="submitSuccess"
      ></cron-task-from>
    </a-modal>
  </div>
</template>
<script lang='ts'>
import { defineComponent, onMounted, reactive, ref, toRefs } from "vue";
import cronTaskApi from "/@/api/org/cron-task";
import { cronTaskTableColumns } from "../interface";
import { useI18n } from "vue-i18n";
import { useModelPageTable } from "/@/kit/model-kit";
import { message } from "ant-design-vue";
import CronTaskFrom from "./cron-task-form.vue";
export default defineComponent({
  name: "CronTaskList",
  components: { CronTaskFrom },
  setup() {
    const { t } = useI18n();
    const cronTaskPageTableRef = ref(null);
    const cronTaskFormRef = ref(null);
    const {
      primaryKey,
      searchTable,
      loadData,
      deleteSelectData,
      reloadTable,
    } = useModelPageTable(cronTaskPageTableRef, cronTaskApi);
    const cronTaskState = reactive({
      columns: cronTaskTableColumns,
      primaryKey,
      loadData,
      addButtonClick: () => {
        cronTaskState.modalTitle = t("org.cron-task.addCronTaskTitle");
        cronTaskState.currentCronTaskId = null;
        cronTaskState.showModal = true;
      },
      editButtonClick: (record: any) => {
        cronTaskState.modalTitle = t("org.cron-task.editCronTaskTitle");
        cronTaskState.currentCronTaskId = record.cronTaskId;
        cronTaskState.showModal = true;
      },
      deleteButtonClick: () => deleteSelectData(),
      changeActive: (record: any) => {
        record.changeActionBtnLoading = true;
        cronTaskApi
          .changeActive(record.cronTaskId, !record.active)
          .then((res) => {
            message.success(t("org.cron-task.changeActiveSuccessMsg"));
            reloadTable();
          });
      },
      runOnceJob: (record: any) => {
        record.runOnceJobBtnLoading = true;
        cronTaskApi.runOnceJob(record.cronTaskId).then((res) => {
          message.success(t("org.cron-task.runOnceJobSuccessMsg"));
          reloadTable();
        });
      },
      ///弹窗
      showModal: false,
      currentCronTaskId: null,
      modalTitle: null,
      handleOk: () => cronTaskFormRef.value.onSubmit(),
      submitSuccess: () => {
        cronTaskState.showModal = false;
        reloadTable();
      },
    });
    onMounted(() => searchTable());
    return {
      t,
      cronTaskPageTableRef,
      cronTaskFormRef,
      ...toRefs(cronTaskState),
    };
  },
});
</script>
<style lang='less' >
.cronTaskFormModal .ant-modal-body {
  padding-bottom: 0px !important;
}
</style>